<template>
  <div>
    <!-- 对话框 -->
    <van-dialog
      :show="dialogShow"
      title="更换手机号码"
      show-cancel-button
      @confirm="clickInfo"
      @cancel="$emit('update:dialogShow', false)"
    >
      <van-form @submit="clickInfo" label-width="60px">
        <van-cell-group inset>
          <van-field
            v-model="newPhoe"
            type="tel"
            clearable
            maxlength="11"
            name="新手机号"
            label="新手机号"
            placeholder="请填写新手机号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="vcode"
            type="number"
            name="验证码"
            label="验证码"
            clearable
            placeholder="请填写验证码"
            maxlength="4"
            :rules="[{ required: true, message: '' }]"
          >
            <template #button>
              <van-button
                round
                plain
                color="#b31731"
                size="mini"
                type="default"
                class="ml-10 pl-10 pr-10"
                @click="sendVcode"
                :disabled="codeDisabled"
                native-type="button"
                >{{ sendBtnText }}</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { Toast } from "vant";
export default {
  props: {
    dialogShow: {
      type: Boolean,
      required: true,
    },
  },
  components: {},
  setup(props, context) {
    const state = reactive({
      newPhoe: '',
      vcode:'',
      sendBtnText: "获取验证码",
    });
    // 发送手机验证码
    const sendVcode = () => {
      if (!state.newPhoe) return Toast.fail("请输入新手机号码");
      cutdown();
    };
    // 发送验证码后倒计时
    const cutdown = () => {
      let time = 60;
      state.sendBtnText = time + "S";
      state.codeDisabled = true;
      const timer = setInterval(() => {
        time--;
        state.sendBtnText = time + "S";
        if (time <= 0) {
          state.sendBtnText = "获取验证码";
          state.codeDisabled = false;
          clearInterval(timer);
        }
      }, 1000);
    };
    const clickInfo = ()=>{
      // 抛出事件
      context.emit('submit-phone')
    }
    return {
      ...toRefs(state),
      sendVcode,
      clickInfo,
    };
  },
};
</script>

<style lang="less" scoped></style>
